<template>
  <div ref="canvas" class="canVasFill"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const canvas = ref< HTMLElement | null >(null);

const reloadCanvas = ()=>{
  var ctx: CanvasRenderingContext2D | null, 
      w: number, 
      h: number, 
      cx: number, 
      cy: number, 
      PI: number, 
      PI_HALF: number, 
      cos: { (arg0: any): number; (x: number): number; }, 
      sin: { (arg0: any): number; (x: number): number; }, 
      random: { (): number; (): number; }, 
      lineWidth: number, 
      C, 
		  rings: any[],
      ringsLength: number,
      data;
		
		  ctx = document.createElement('canvas').getContext('2d');
		  w = 1200;
		  h = 1200;
		  cx = (w / 2);
		  cy = (h / 2);
		  rings = [];
		  ringsLength = 0;
		  
		  PI = Math.PI;
		  PI_HALF = PI / 2;
		  cos = Math.cos;
		  sin = Math.sin;
		  random = Math.random;
		
		  lineWidth = 0.2;
		  C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
		  
		  data = [
		    /* ring {t:total_particles, r:radius, d:distance, s:speed, c:color} */
		    [
		      {t:80, r:(cx-10), d:40, s:30, c:C[1]},
		      {t:60, r:(cx-20), d:40, s:80, c:C[2]},
		      {t:20, r:(cx-30), d:20, s:80, c:C[2]},
		    ],
		    // [
		    //  {t:80, r:(cx-80),  d:40, s:40, c:C[4]},
		    //    {t:80, r:(cx-90),  d:20, s:40, c:C[4]},
		    //    {t:20, r:(cx-100), d:20, s:40, c:C[2]},
		    //    {t:40, r:(cx-110), d:20, s:40, c:C[2]},
		    // ],
		    // [
		    //  {t:60, r:(cx-160), d:40, s:20, c:C[2]},
		    //    {t:20, r:(cx-170), d:30, s:60, c:C[2]},
		    //    {t:40, r:(cx-180), d:40, s:60, c:C[2]},
		    // ],
		    [
		     {t:40, r:(cx-230), d:40, s:20, c:C[5]},
		       {t:20, r:(cx-240), d:20, s:10, c:C[5]},
		    ],
		    // [
		    //    {t:10, r:(cx-290), d:10, s:10, c:C[4]}
		    // ]
		  ];

      if(ctx){
        ctx.canvas.width = w;
        ctx.canvas.height = h;
        (canvas.value as HTMLElement).appendChild(ctx.canvas);
      }
		  
		
		  data.forEach(function(group) {
		    var ring: any[] = [];
		    
		    group.forEach(function(orbit, i) {
		      var total_particles, index;
		      
		      total_particles = orbit.t;
		      index = 0;
		      
		      for (; index < total_particles; index++) {
		        var radius, distance, speed, color, opacity;
		
		        radius = orbit.r;
		        distance = orbit.d;
		        speed = random() / orbit.s;
		        speed = i % 2 ? speed : speed * -1;
		        color = orbit.c;
		        // opacity = orbit.o;
		
		        ring.push(P(radius, distance, speed, color));
		
		        radius = distance = speed = color = opacity = null;
		      }
		    });
		    
		    rings.push(ring);
		  });
		
		  ringsLength = rings.length;
		 
		  /* */
		  function P(radius: number, distance: number, speed: number, color: string) {
		    return{
          a : PI / 180,
          d : distance,
          d2 : (distance * distance),
          x : cx + radius * cos(PI / 180),
          y : cy + radius * sin(PI / 180),
          c : color,
          r : (random() * 8),
          R : random() > 0.5 ? radius : radius - 5,
          s : speed,
          pos : random() * 360,
        }
		  }
		  
		  function draw() {
		    var i, j, k, xd, yd, d, ring, ringLength, ringLength2, particle, p2;
		
		    if(ctx){
          ctx.beginPath();
          ctx.globalCompositeOperation = "source-over";
          ctx.rect(0, 0 , w, h);
          ctx.fillStyle = "transparent";
          ctx.fill();
          ctx.closePath();
        }
		
		    for (i = 0; i < ringsLength; i++) {
		      ring = rings[i];
		      ringLength = ring.length;
		      ringLength2 = ringLength - 100;
		      
		      for (j = 0; j < ringLength; j++) {
		        particle = ring[j];
		
		        particle.x = cx + particle.R * sin(PI_HALF + particle.pos);
		        particle.y = cy + particle.R * cos(PI_HALF + particle.pos);
		        particle.pos += particle.s;
		
		        if(ctx){
              ctx.beginPath();
              ctx.globalAlpha = 0.12;
              ctx.globalCompositeOperation = "lighter";
              ctx.fillStyle = particle.c;
              ctx.arc(particle.x, particle.y, particle.r, PI * 2, 0, false);
              ctx.fill();
              ctx.closePath();
            }
		
		        for (k = 0; k < ringLength2; k++) {
		          p2 = ring[k];
		
		          yd = p2.y - particle.y;
		          xd = p2.x - particle.x;
		          d = ((xd * xd) + (yd * yd));
		
		          if (d < particle.d2 && ctx) {
		            ctx.beginPath();
		            ctx.globalAlpha = 1;
		            ctx.lineWidth = lineWidth;
		            ctx.moveTo(particle.x, particle.y);
		            ctx.lineTo(p2.x, p2.y);
		            ctx.strokeStyle = p2.c;
		            ctx.stroke();
		            ctx.closePath();
		          }
		        }
		      }
		    }
		  }
		
		  function loop() {
		    draw();
		    requestAnimationFrame(loop);
		  }
		
		  loop();
}

onMounted(()=>{
  reloadCanvas()
})
</script>


<style lang="scss" scoped>
@import '../../../assets/systemCss/Login.scss';
</style>